{{extend name="layout/base-html"}}

{{block name="body"}}
<style>
    .xm-form-select {
        width: 100%;
    }
</style>

<div class="layui-fluid">
    <div class="layui-row">
        <form class="layui-form">
            <div class="layui-form-item">
                <label for="name" class="layui-form-label"><span class="x-red">*</span>名称</label>
                <div class="layui-input-inline">
                    <input type="text" id="name" name="name" required="" lay-verify="required"
                           autocomplete="off" class="layui-input" value="{{$data.name|default=''}}">
                </div>
            </div>

            <div class="layui-form-item">
                <label for="link" class="layui-form-label">链接</label>
                <div class="layui-input-inline">
                    <input type="text" id="link" name="link" autocomplete="off" class="layui-input"
                           value="{{$data.link|default=''}}">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label"><span class="x-red">*</span>上传图片</label>

                <div class="layui-input-block rain-resource">
                    <button type="button" class="layui-btn layui-btn-normal" id="select-img">选择文件</button>
                    <button type="button" class="layui-btn" id="upload-img">开始上传</button>
                    <button type="button" class="layui-btn" id="reset-img">重置图片</button>

                    <div class="layui-upload-list">
                        <input type="hidden" name="resource">
                        <div class="upload__img">
                            <img src="">
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label"><span class="x-red">*</span>广告分类</label>

                <div class="layui-input-block">
                    <div id="ad-cate" class="xm-form-select"></div>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label"><span class="x-red">*</span>描述</label>
                <div class="layui-input-block">
                    <textarea name="description" placeholder="请输入描述"
                              class="layui-textarea">{{$data.description|default=''}}</textarea>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label"></label>

                <button class="layui-btn" lay-filter="{{$data ? 'edit' : 'add'}}" lay-submit="">
                    {{$data ? '修改' : '增加'}}
                </button>
            </div>
        </form>
    </div>
</div>

<script type="module">
    import {update, save} from "/static/admin/js/api/additional/ad.js";
    import {rain} from "/static/admin/js/app.js";
    import {uploadApi} from "/static/admin/js/extends/layui-upload.js";
    import {uploadFilesApi} from "/static/admin/js/extends/layui-upload-files.js";

    xmSelect.render({
        ...rain.config.xmSelect,

        el: "#ad-cate",
        name: "cate_id",
        initValue: ['{{$data.cate_id|default=0}}'],
        layVerify: 'required',
        radio: true,
        clickClose: true,
        model: {
            label: {
                type: 'text',
                text: {
                    //左边拼接的字符
                    left: '',
                    //右边拼接的字符
                    right: '',
                    //中间的分隔符
                    separator: ', ',
                },
            }
        },
        data: JSON.parse('{{$cate|raw}}')
    });

    layui.use(['form', 'upload'], () => {
        let $ = layui.jquery,
            form = layui.form,
            upload = layui.upload;

        let event = '{{$data ? "edit" : "add"}}';

        // 监听事件
        formData(form, event, 'edit' === event ? {
            request: update,
            id: '{{$data.id|default=0}}',
        } : {
            request: save,
        });

        // 上传单张图片
        uploadApi.upload = upload;
        uploadApi.image({
            elem: '#select-img',
            bindAction: '#upload-img',
            resetAction: "#reset-img",
        }, {
            resource: JSON.parse('{{if $data}}{{$data.resource|raw}}{{else}}{}{{/if}}'),
        });
    });
</script>
{{/block}}
